import React from 'react';
import { Modal, Button, Form, Input } from 'antd';

const Item = Form.Item;
const TextArea = Input.TextArea;

@Form.create()
class Components extends React.Component {
  /**
   * 提交表单到父组件
   */
  onOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.editor(values);
      }
    });
  };
  clear =() => {
    this.props.form.resetFields();
  }

  render() {
    const {
      visible,
      formatData,
      toggleVisible,
      type,
      form: { getFieldDecorator },
    } = this.props;
      

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    return (
      <Modal title="权限列表" afterClose={this.clear} visible={visible} onCancel={toggleVisible} onOk={this.onOk}>
        <Form>
          <Item {...formItemLayout} label="账号">
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: '不能为空' }],
              initialValue: formatData.userName,
            })(<Input readOnly={type==="edit"} />)}
          </Item>
          {formatData.id === '' && (
            <Item {...formItemLayout} label="密码">
              {getFieldDecorator('pswd', {
                rules: [{ required: true, message: '不能为空' }, { min: 6, message: '长度太短' }],
              })(<Input type="password" />)}
            </Item>
          )}

          <Item {...formItemLayout} label="手机号">
            {getFieldDecorator('cellphone', {
              rules: [
                {
                  pattern: /1[0-9]{10}$/,
                  message: '手机格式不正确',
                },
              ],
              initialValue: formatData.cellphone,
            })(<Input />)}
          </Item>
          <Item {...formItemLayout} label="邮箱">
            {getFieldDecorator('email', {
              rules: [{ type: 'email', message: '邮箱格式不正确' }],
              initialValue: formatData.email,
            })(<Input />)}
          </Item>
          <Item {...formItemLayout} label="昵称">
            {getFieldDecorator('nickName', {
              initialValue: formatData.nickName,
            })(<Input />)}
          </Item>
          <Item {...formItemLayout} label="备注">
            {getFieldDecorator('remark', {
              initialValue: formatData.remark,
            })(<TextArea />)}
          </Item>
        </Form>
      </Modal>
    );
  }
}

export default Components;
